<template>
	<view style="padding-bottom:20rpx;">
		<image class="topbg" style="height:300rpx;" :src="apifun.serveimg + 'statisticsbg.png'" mode=""></image>
		<view style="width:100%;height:300rpx;" :style="{'paddimgTop':statusheadheight+'px'}"></view>
		<view class="topblock">
			<view class="topmain marginAuto" :style="{'top':statusheadheight+'px'}">
				<view class="usermsg flex" @click="wxlogin()" v-if="!token">
					<view class="headimg">
						<image :src="apifun.serveimg + 'headimg.png'" mode=""></image>
					</view>
					<view class="headmsg">
						<view class="headmsgname" style="margin-top:40rpx;">去登录</view>
					</view>
				</view>
				<view class="usermsg flex" @click="navigate('/pages/my/set')" v-if="token">
					<view class="headimg">
						<image v-if="!avatar" :src="apifun.serveimg + 'headimg.png'" mode=""></image>
						<image v-if="avatar" :src="apifun.URLimg + avatar" mode=""></image>
					</view>
					<view class="headmsg">
						<view class="headmsgname">{{ usermsg.username  || '微信用户'}}</view>
						<view class="headmsgphone">{{ usermsg.mobile }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view ></view> -->
		<view class="apply marginAuto" style="margin-top:50rpx;">
			<view class="applymain marginAuto flex">
				<view class="applyeach" @click="navigate('/pages/my/mydriver')">
					<view class="applyeach-img marginAuto">
						<image :src="apifun.serveimg+'bm3.png'" mode=""></image>
					</view>
					<view class="applyeach-name">我的陪驾</view>
				</view>
				<view class="applyeach" @click="navigate('/pages/my/myvalidate')">
					<view class="applyeach-img marginAuto">
						<image :src="apifun.serveimg+'bm4.png'" mode=""></image>
					</view>
					<view class="applyeach-name">我的验车</view>
				</view>
				<view class="applyeach" @click="navigate('/pages/my/mytest')">
					<view class="applyeach-img marginAuto">
						<image :src="apifun.serveimg+'bm2.png'" mode=""></image>
					</view>
					<view class="applyeach-name">我的试驾</view>
				</view>
				<view class="applyeach" @click="navigate('/pages/my/mystudy')">
					<view class="applyeach-img marginAuto">
						<image :src="apifun.serveimg+'bm1.png'" mode=""></image>
					</view>
					<view class="applyeach-name">我的学车</view>
				</view>
			</view>
		</view>
		<view class="invite marginAuto" @click="navigate('/pages/my/invite')">
			<image :src="apifun.serveimg+'invite.png'" mode=""></image>
		</view>
		<view class="fun marginAuto">
			<view class="funeach flex" @click="navigate('/pages/my/agreement')">
				<view class="funeachtitle">用户协议</view>
				<view class="funeachicon">
					<uv-icon name="arrow-right" size="20" color="#666666"></uv-icon>
				</view>
			</view>
			<view class="funeach flex" @click="navigate('/pages/my/discountlist')">
				<view class="funeachtitle">我的优惠券</view>
				<view class="funeachicon">
					<uv-icon name="arrow-right" size="20" color="#666666"></uv-icon>
				</view>
			</view>
			<view class="funeach flex" @click="navigate('/pages/my/team')">
				<view class="funeachtitle">分享奖励</view>
				<view class="funeachicon">
					<uv-icon name="arrow-right" size="20" color="#666666"></uv-icon>
				</view>
			</view>
			
			<view class="funeach flex" @click="navigate('/pages/my/aboutus')">
				<view class="funeachtitle">关于我们</view>
				<view class="funeachicon">
					<uv-icon name="arrow-right" size="20" color="#666666"></uv-icon>
				</view>
			</view>
		</view>
		<view class="marginAuto" style="width:600rpx;margin-top:60rpx;">
			<uv-button text="退出登录" @click="quitfun()" :customStyle="{
				'background':'#EBEBEB',
				'color':'#838383',
				'font-size':'30rpx',
				'width':'600rpx',
				'height':'100rpx',
				'border-radius':'100rpx'
			}"></uv-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusheadheight: uni.getStorageSync('ClientRectTop') + uni.getStorageSync('ClientRectHeight'),
				token:'',
				apifun: this.apifun,
				avatar: '',
				usermsg: {},
				scene:'', // 邀请人ID
				type:'0',  // 0用户邀请  1教练邀请
				// qrcode:{}
			};
		},
		onLoad(option) {
			// this.qrcode = option;
			this.scene = decodeURIComponent(option.scene) || '';
			this.type = decodeURIComponent(option.type) || '';
		},
		onShow() {
			// uni.setStorageSync('token','GEQhEASa9M6oWXEOelzqVA==');
			this.token = uni.getStorageSync('token')
			if(this.token){
				this.getusermsgfun()
			}
		},
		methods: {
			getusermsgfun() {
				this.apifun.unirequest('/api/user/getUserInfo','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						uni.setStorageSync('token', datas.token)
						this.usermsg = datas;
						this.avatar = datas.avatar;
						uni.setStorageSync('usermsg',datas);
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			wxlogin() {
				uni.getProvider({
					service: "oauth",
					success:(res) => {
						uni.login({
							provider: 'weixin', //使用微信登录
							scopes: 'auth_user',
							success: (loginRes) => {
								this.getopenid(loginRes.code);
							},
						})
					}
				})
			},
			getopenid(code){
				let sendData = {
					code: code,
				};
				this.apifun.unirequest('/api/wx/getOpenId', 'post', sendData, (res) => {
					if (res.code === 200) {
						let datas = res.data;
						this.apifun.navigate('/pages/start/login','scene='+this.scene+'&type='+this.type+'&openid='+datas)
					} else {
						this.apifun.toast(res.msg)
					}
				}, true,true)
			},
			navigate(urls,params){
				if(uni.getStorageSync('token')){
					this.apifun.navigate(urls,params)
				}else{
					this.apifun.toast('您尚未登录；请先登录')
				}
			},
			wxloginfun(code) { // 此方法废弃
				let sendData = {
					code: code,
					scene:this.scene, // 邀请人ID
					type:this.type,  // 0用户邀请  1教练邀请
				};
				this.apifun.unirequest('/api/wx/wxLogin', 'post', sendData, (res) => {
					if (res.code === 200) {
						let datas = res.data;
						this.token = datas.token;
						uni.setStorageSync('token', datas.token)
						this.apifun.toast('登录成功');
						this.getusermsgfun();
					} else {
						this.apifun.toast(res.msg)
					}
				}, true,true)
			},
			quitfun() {
				uni.showModal({
					title: '退出登录',
					content: '确定要退出登录吗？',
					success:(res) => {
						if (res.confirm) {
							let ClientRect = uni.getStorageSync('ClientRect');
							let ClientRectTop = uni.getStorageSync('ClientRectTop');
							let ClientRectHeight = uni.getStorageSync('ClientRectHeight');
							uni.clearStorageSync();
							uni.setStorageSync('ClientRect', ClientRect);
							uni.setStorageSync('ClientRectTop', ClientRectTop);
							uni.setStorageSync('ClientRectHeight', ClientRectHeight);
							setTimeout(() => {
								this.usermsg={}
							}, 300)
						} else if (res.cancel) {}
					}
				});
			}
		},
	};
</script>

<style scoped lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.topbg {
		position: fixed;
		z-index:95;
		top: 0;
		left: 0;
		width: 100%;
	}

	.topblock {
		position:fixed;
		top: 0;
		left: 50%;
		z-index:95;
		width:690rpx;
		margin-left: -345rpx;
		height: 300rpx;
	}

	.topmain {
		position: relative;
		width: 690rpx;
		.usermsg {
			margin-top: 30rpx;

			.headimg {
				width: 140rpx;
				height: 140rpx;

				image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 100rpx;
				}
			}

			.headmsg {
				margin-left: 20rpx;
				line-height: 50rpx;

				.headmsgname {
					font-weight: 600;
					margin-top: 20rpx;
					font-size: 30rpx;
					color: #222222;
				}

				.headmsgphone {
					line-height: 60rpx;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
	}
	.invite{
		width: 690rpx;
		height:188rpx;
		image{
			width: 690rpx;
			height:188rpx;
		}
	}
	// 报名
	.apply{
		position: relative;
		z-index: 90;
		.applytitle{
			width: 690rpx;
			padding: 10rpx 0;
			color: #222222;
			font-size: 34rpx;
			font-weight: bold;
			line-height: 60rpx;
		}
		.applymain{
			width: 630rpx;
			padding:30rpx;
			background: #fff;
			border-radius:20rpx;
			.applyeach{
				width:25%;
				.applyeach-img{
					width: 52rpx;
					height: 52rpx;
					image{
						width: 52rpx;
						height: 52rpx;
					}
				}
				.applyeach-name{
					padding-top: 10rpx;
					color: #333333;
					font-size: 30rpx;
					line-height: 50rpx;
					text-align: center;
				}
			}
		}
	}
	// 列表
	.fun{
		width: 630rpx;
		padding: 0 30rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		.funeach{
			line-height: 60rpx;
			padding: 20rpx 0;
			justify-content: space-between;
			border-bottom: 1px solid #F4F4F4;
			.funeachtitle{
				font-size: 30rpx;
				color: #333333;
			}
			.funeachicon{
				margin-top: 10rpx;
			}
		}
	}
</style>